<template>
  <div class="contaiter">
    <el-form
      ref="languageAbility"
      :model="languageAbility"
      label-position="left"
      label-width="150px"
      :rules="rules"
    >
      <el-form-item label="语种" required prop="languageName">
        <span slot="label" class="left-label">
          <span calss="cn-label">语种</span><br />
          <span class="en-label">Language</span>
        </span>

        <el-select
          v-model="languageAbility.languageName"
          placeholder="请选择语种"
        >
          <el-option
            :label="item"
            :value="item"
            v-for="item in ['其他', '英语', '日语', '法语', '俄语', '西班牙语']"
          >
          </el-option>
        </el-select>
        <span :hidden="languageAbility.languageName != '其他'">
          <!-- <el-input
            v-if="languageAbility.languageName=='其他'" -->
          <el-input
            v-model="languageAbility.languageName2"
            placeholder="请输入其他语种"
            style="width: 220px; margin-left: 20px"
          />
        </span>
      </el-form-item>
      <el-form-item label="掌握程度" required prop="level">
        <span slot="label" class="left-label">
          <span calss="cn-label">掌握程度</span><br />
          <span class="en-label">Level</span>
        </span>
        <el-radio
          v-model="languageAbility.level"
          :label="item"
          v-for="item in ['一般', '良好', '熟练', '精通']"
        >
          {{ item }}</el-radio
        >
      </el-form-item>
      <el-form-item label=" ">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm('languageAbility')"
          >确定</el-button
        >
        <el-popconfirm
          title="确定删除吗？"
          class="delete-icon"
          @confirm="deleteConfirm"
          v-if="showDel"
        >
          <i class="delete-icon" slot="reference"></i>
        </el-popconfirm>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      languageAbility: {
        languageName: "", //语言名称
        languageName2: "",
        level: "", //掌握程度
      },
      rules: {
        languageName: [
          { required: true, message: "请选择语种", trigger: "blur" },
        ],
        languageName2: [
          { required: true, message: "请输入其他语种", trigger: "blur" },
        ],
        level: [
          { required: true, message: "请选择掌握程度", trigger: "change" },
        ],
      },
      index: null,
      showDel: false,
    };
  },
  watch: {},
  methods: {
    cancel() {
      this.languageAbility = {
        languageName: "", //语言名称
        languageName2: "", //语言名称
        level: "", //掌握程度
      };
      this.showDel = false;
      this.index = null;
      this.$parent.$parent.$parent.closeFun("languageAbility");
      this.$nextTick(() => {
        this.$refs["languageAbility"].clearValidate();
      });
    },
    deleteConfirm() {
      this.$parent.$parent.$parent.deleteFun("languageAbility", this.index);
      this.cancel();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.languageAbility));
          if (data.languageName == "其他") {
            if (!data.languageName2) {
              return;
            }
            data.languageName = data.languageName2;
          }
          this.languageAbility.languageName2 = "";
          this.$parent.$parent.$parent.upDate(
            "languageAbility",
            { languageName: data.languageName, level: data.level },
            this.index
          );
          this.cancel();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init(data, index) {
      data = JSON.parse(JSON.stringify(data));
      let arr = ["其他", "英语", "日语", "法语", "俄语", "西班牙语"];
      if (
        arr.filter((v) => v == data.languageName).length <= 0 &&
        data.languageName
      ) {
        data.languageName2 = data.languageName;
        data.languageName = "其他";
      }
      this.languageAbility = data;
      this.index = index;
      this.showDel = true;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
.delete-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../../../assets/images/delete_icon.png") no-repeat center
    center / cover;
}
</style>
